import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; // 主要用于alias文件路径别名
import ViteComponents from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import viteCompression from "vite-plugin-compression";
import commonjs from "rollup-plugin-commonjs";
import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import';

const CWD = process.cwd();
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const { VITE_BASE_URL, VITE_APP_OUT_DIR } = loadEnv(mode, CWD);
  return {
    base: VITE_BASE_URL,
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      ViteComponents({
        resolvers: [ElementPlusResolver()],
        directoryAsNamespace: true,
      }),
      createStyleImportPlugin({
        resolves: [
          VxeTableResolve()
        ],
      }),
      viteCompression(),
      "@babel/plugin-syntax-dynamic-import",
    ],
    resolve: {
      alias: [
        {
          find: "@",
          replacement: path.resolve(__dirname, "src"),
        },
        {
          find: "static",
          replacement: path.resolve(__dirname, "src/static"),
        },
      ],
    },
    // 强制预构建插件包
    // optimizeDeps: {
    //   include: [
    //     "axios",
    //     "lodash-es",
    //     "xe-utils",
    //     "monaco-editor",
    //     "normalize.css",
    //     "nprogress"
    //   ],
    //   exclude: ["element-plus", "vxe-table"],
    // },
    // 本地运行配置，及反向代理配置
    server: {
      host: "0.0.0.0",
      cors: true, // 默认启用并允许任何源
      open: true, // 在服务器启动时自动在浏览器中打开应用程序
      port: 9527,
      //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
      proxy: {
        "/v1": {
          target: "http://localhost:8086", //代理接口
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/v1/, '')
        },
      },
    },
    build: {
      outDir: VITE_APP_OUT_DIR,
      assetsDir: "assets", // 指定生成静态资源的存放路径
      target: "es2019",
      minify: "terser",
      terserOptions: {
        compress: {
          keep_infinity: true,
          drop_console: mode === "production",
          drop_debugger: mode === "production",
          output: {
            comments: true,
          },
        },
      },
      rollupOptions: {
        plugins: [commonjs()],
        output: {
          entryFileNames: `assets/[name].${new Date().getTime()}.js`,
          chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
          assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
          compact: true,
          manualChunks: {
            vue: ["vue", "vue-router", "vuex"],
            echarts: ["echarts"],
          },
        },
      },
    },
    css: {
      // css预设器配置项
      preprocessorOptions: {
        less: {
          javascriptEnabled: false,
        },
      },
    },
  };
});
